

let logBtn = document.querySelector( '.log_btn' )  //获取登陆按钮
let logBox = document.querySelector( '.log_box' )  //获取弹出框

let logForm = document.querySelector( '.log_form' )  //获取表单

let gbBox = document.querySelector( '.gb_log' )   //获取关闭按钮

let userMsg = document.querySelector( '.user-msg' ) //获取账号提示
let passMsg = document.querySelector( '.pass-msg' )  //获取密码提示

let delBtn = document.querySelector( '.del_btn' ) //获取重置按钮

let eyeBtn = document.querySelector( '.eye_btn' )  //获取图片（眼睛）

let formBox = document.querySelector( ' .formbox ' )


//定义表单提交标杆
let flag = {
    userFlag: false,
    passFlag: false
}


 
//获取表单元素
let user = document.querySelector( '.user' )  //账号
let pass = document.querySelector( '.pass' )  //密码
// console.log(user);

//注册事件

//点击登陆按钮显示
logBtn.addEventListener('click' , function(){
    logBox.style.display = 'block'
    logBox.style.height = '100%'
    logForm.style.marginTop = '18%'
})

//点击关闭按钮掩藏
gbBox.addEventListener('click' , function(){
    logBox.style.height = '0'
    logForm.style.marginTop = '-15%'
})


//注册账号事件
user.addEventListener('blur' , function(){
    // alert('111')

    //获取输入的账号信息
    let userVal = user.value
    // console.log(userVal);

    //创建用户名规则
    //5-16： 字母开头，后面字母 数字
    let userRag = /^[A-z][A-z0-9]{4,15}$/

    //验证
    let userBool = userRag.test( userVal )  
    
    //判断
    if( userBool ){
        userMsg.innerHTML = '正确'
        userMsg.style.color = '#068ff1'
        flag.userFlag = true
    }else{
        userMsg.innerHTML = '错误'
        userMsg.style.color = 'red'
        flag.userFlag = false
    }

})

//注册密码事件
pass.addEventListener('blur' , function(){
    // alert('111')
    //获取密码输入信息
    let passVal = pass.value
    // console.log(passVal);

    //创建规则
    let passReg = /^[A-z][A-z0-9]{4,15}$/

    let passBool = passReg.test( passVal )

    if( passBool ){
        passMsg.innerHTML = '正确'
        passMsg.style.color = '#068ff1'
        flag.passFlag = true
    }else{
        passMsg.innerHTML = '错误'
        passMsg.style.color = 'red'
        flag.passFlag = false
    }
})




//注册提交事件
formBox.addEventListener('submit' , function(){
    if( !flag.userFlag){
        userMsg.innerHTML = '错误'
        userMsg.style.color = 'red'
        user.focus()  //聚焦
        event.preventDefault();  //阻止提交
    }else if( !flag.passFlag){
        passMsg.innerHTML = '错误'
        passMsg.style.color = 'red'
        pass.focus()  //聚焦
        event.preventDefault();  //阻止提交
    }
  
})


//用户名
user.addEventListener('keyup' , function(){
    //获取用户名长度

    let len = user.value.length;
    
    //判断
    if(len > 0){
        delBtn.style.display = 'block'
    }else{
        delBtn.style.display = 'none'
    }

    //重置输入框
    delBtn.addEventListener('click' , function(){
        //清空输入框
        user.value = ''
        //掩藏
        delBtn.style.display = 'none'
        user.focus()  //聚焦
        userMsg.innerHTML = '' //情况文字提示

    })
   
})


// 眼睛默认样式
pass.addEventListener( 'keyup' , function(){
    let pslen = pass.value.length
    // console.log(pslen);

    if( pslen > 0){
        eyeBtn.style.display = 'block'
    }else{
        eyeBtn.style.display = 'none'
    }
})




//设置标杆值
let eyeflag = true;

eyeBtn.addEventListener('click' , function(){
    
    //判断
    if( eyeflag ){
        eyeBtn.src = './images/open.png'
        pass.type = 'text'
    }else{
        eyeBtn.src = './images/close.png'
        pass.type = 'password'
    }
    eyeflag = ! eyeflag 
})























